<template>
  <div id="app">
<!--    <h1>{{ msg.split('').reverse().join('') }}</h1>-->
    <h1>{{ msg }}</h1>
    <h1>reverseMsg: {{reverseMsg}}</h1>
    <hr>
    <ul>
      <li v-for="(item, ind) in products" :key="ind">
        {{ item.title }} -- {{item.num}}
      </li>
    </ul>
    <h3>total: {{ calcTotal }}</h3>
    <h3>total: {{ calcTotal1() }}</h3>
  </div>
</template>

<script>

export default {
  name: 'App',
  data() {
    return {
      msg: 'hello TodoList!!!',
      products: [
        {
          title: 'apple',
          num: 3
        },
        {
          title: 'huawei',
          num: 13
        },
        {
          title: 'meizu',
          num: 1
        },
        {
          title: 'mi',
          num: 10
        }
      ]
    }
  },
  computed: {
    reverseMsg() {
      return this.msg.split('').reverse().join('')
    },
    calcTotal() {
      return this.products.reduce((count, item) => count += item.num, 0)
    },
  },
  watch: {
    products() {
      console.log(this.products)
    }
  },
  methods: {
    calcTotal1() {
      return this.products.reduce((count, item) => count += item.num, 0)
    }
  }
}

/*

单页面应用

vue-router
* */

</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  color: #2c3e50;
}
</style>
